<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器</title>
    <style>
        span{
            color: red;
            font-size: 36px;
        }
        .pclass{
            color: green;
        }
        #pc{
            color:brown;
        }

        li,p{
            color: blueviolet;
        }
        .t1{
             color: red;   
        }

        .t2{
            color: chocolate;
        }
    </style>
</head>
<body>
    
    <article>

        <ul>
            <li>全局选择器
                <p> *{} 全局匹配 通配符 一般做初始化样式 优先级低</p>
            </li>
            <li>元素选择器
                <p>如 <span>p b hr div header</span> 等,现在的红色字体就是</p>
            </li>
            <li>
                类选择器
                <p class="pclass">我是一个类 给我一个绿色的字体
                </p>
                <p>类选择器采用的是 <span>.</span> 加上类名组成</p>
                <p>类选择器可以被多种标签使用  类型英文开头 可以加上数字和_-</p>
                <p class="pclass size">多个class 加空格分开添加 <span>pclass size</span></p>
            </li>
            <li>Id选择器
                <p id="pc">id只能有一个 css中通过'#'来标记id  </p>
                <p>id 不能以数字开头
                </p>
            </li>
            <li>合并选择器
                <img src="../u_imgmultsel.png" alt="">
            </li>
        </ul>

        <section>

            <p>选择器的优先级问题</p>

            <ul>
                <li>全局选择器  * </li>
                <li>元素选择器  p div li
                </li>
                <li>类选择器 (.)
                </li>
                <li>Id选择器 (#)
                </li>
            </ul>
            <p>选择器的优先级通过权重进行区分</p>

            <ol type="1">
                <li>元素选择器 weight = 1</li>
                <li>class选择器 weight = 10</li>
                <li>ID选择器 weight = 100</li>
                <li style="color: red;">内联样式 weight = 1000</li>
            </ol>
            <p>
                行内>ID>Class>元素标签>全局配置
            </p>
            <p class="t1 t2">同级别style 效果 ,根据代码执行顺序生效</p>

        </section>
    </article>
</body>
</html>